<%--
  Created by IntelliJ IDEA.
  User: 91658
  Date: 2018/6/8
  Time: 10:20
  收入细项管理
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>收入细项管理</title>
    <%@ include file="../common/common.jsp" %>
    <script type="text/javascript" src="/js/jquery.slidereveal.min.js"></script>
    <style>
        .one{
            width: 8%;
            height:90px;
            border:1px solid;
            float: left;
            border-radius:5px;
            margin: 20px;
        }
        .name{
            font-size: 15px;
        }
        .msg-tip{
            position: absolute;
            top: 13%;
            left: 50%;
            font-size: 17px;
            color: #46A734;
            display: none;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <%@ include file="../common/head.jsp" %>
    <%@ include file="../common/left.jsp" %>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-collapse">
                <c:forEach items="${incomeList}" var="income">
                    <div class="layui-card one" style="background: ${income.color}">
                        <div class="layui-card-header">${income.incomeName}</div>
                        <div class="layui-card-body name">
                            ${income.incomeName}
                        </div>
                    </div>
                </c:forEach>
                <div class="layui-card one" style="background: #F2EFE6">
                    <div class="layui-card-header">新增</div>
                    <div class="layui-card-body name">
                        <button class="layui-btn layui-btn-fluid" style="height: 45%; margin-top: -20px;" id="addIncomeBtn">新增</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@ include file="../common/bottom.jsp" %>
</div>
<iframe id="slider" class="sliderslider" frameborder=0 height=100 marginheight=0 marginwidth=0
        style="z-index: 999;overflow-y :auto;overflow-x: hidden;	border-left: 5px solid #EEEEEE;"
        src="/income/add_income_frame"></iframe>
<div class="msg-tip">
    <label>新增成功</label>
</div>
</body>
<script type="text/javascript">
    layui.use(['element'], function(){
        var element = layui.element;

        $("#slider").slideReveal({
            trigger: $("#addIncomeBtn"),
            push: true,
            width: "500",
            position: "right",
            autoEscape: true
        });

        $("#addIncomeBtn").on('click',function () {
            var slider = $("#slider");
            var value = slider.css("right");
            if(value !== '0px'){
                slider.attr("src","/income/add_income_frame");
                slider.slideReveal("show");
            }else{
                slider.slideReveal("hide");
            }
        });
    });
    function closePopPage() {
        $("#slider").slideReveal("hide");
    }
    function showSuccessMsg() {
        $(".msg-tip").fadeIn("slow");
        $(".msg-tip").fadeOut(3000);
    }
</script>
</html>
